<template>
  <div class="pagination">
    <span v-if="!small" class="total">{{$t('label.commons.total')}} {{totalCount}} {{$t('label.commons.items')}}</span>
    <el-select v-if="!small" v-model="limitNum" @change="turn(currentPage)" class="page">
      <el-option v-for="item in limitNums" :key="item" :label="item + $t('label.commons.items_page')" :value="item"></el-option>
    </el-select>
    <ul class="paging">
      <li class="prev" :class="{'disabled': currentPage <= 1}" @click="currentPage <= 1 ? '' : turn(currentPage - 1)"><i class="el-icon el-icon-arrow-left"></i></li>
      <li class="num" :class="{'active': 1 === currentPage}" @click="totalCount > 0 ? turn(1) : ''">1</li>
      <li class="num icon" :class="{'el-icon-more': !isShowLeftIcon, 'el-icon-d-arrow-left': isShowLeftIcon}" :title="$t('label.commons.back_5_pages')" v-if="currentPage > 5" @mouseover="isShowLeftIcon = true" @mouseout="isShowLeftIcon = false" @click="turn(currentPage - 5)"></li>
      <li class="num" v-if="currentPage === 5" @click="turn(currentPage - 3)">{{ currentPage - 3 }}</li>
      <li class="num" v-if="currentPage - 2 > 1" @click="turn(currentPage - 2)">{{ currentPage - 2 }}</li>
      <li class="num" v-if="currentPage - 1 > 1" @click="turn(currentPage - 1)">{{ currentPage - 1 }}</li>
      <li class="num" v-if="currentPage !== 1 && currentPage !== totalPage" :class="'active'">{{ currentPage }}</li>
      <li class="num" v-if="currentPage + 1 < totalPage" @click="turn(currentPage + 1)">{{ currentPage + 1 }}</li>
      <li class="num" v-if="currentPage + 2 < totalPage" @click="turn(currentPage + 2)">{{ currentPage + 2 }}</li>
      <li class="num" v-if="totalPage - currentPage === 4" @click="turn(currentPage + 3)">{{ currentPage + 3 }}</li>
      <li class="num icon" :class="{'el-icon-more': !isShowRightIcon, 'el-icon-d-arrow-right': isShowRightIcon}" :title="$t('label.commons.forward_5_Pages')" v-if="totalPage - currentPage >= 5" @mouseover="isShowRightIcon = true" @mouseout="isShowRightIcon = false" @click="turn(currentPage + 5)"></li>
      <li class="num" v-if="totalPage > 1" :class="{'active': totalPage === currentPage}" @click="turn(totalPage)">{{ totalPage }}</li>
      <li class="next" :class="{'disabled': currentPage >= totalPage}" @click="currentPage >= totalPage ? '' : turn(currentPage + 1)"><i class="el-icon el-icon-arrow-right"></i></li>
    </ul>
    <span v-if="all" class="jump">{{$t('label.commons.goto')}}<el-input v-model="goPage" @blur="turn(goPage)" @keyup.enter.native="turn(goPage)"></el-input>{{$t('label.commons.page')}}</span>
  </div>
</template>

<script>
  export default {
    name: 'Pagination',
    props: {
      currentPage: {
        type: Number,
        default: 1
      },
      limit: {
        type: Number,
        default: 10
      },
      totalCount: {
        type: Number,
        required: true
      },
      small: {
        type: Boolean,
        default: false
      },
      all: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        goPage: 1,
        limitNum: '',
        limitNums: [20, 50, 100],
        toPrev: false,
        toNext: false,
        isShowLeftIcon: false,
        isShowRightIcon: false
      }
    },
    created () {
      this.initLimitNums()
    },
    computed: {
      totalPage () {
        return Math.ceil(this.totalCount / this.limit)
      },
      showPageBtn () {
        let pageNum = Number(this.totalPage),
          index = Number(this.currentPage),
          arr = []
        if (pageNum <= 9) {
          for (let i = 1; i <= pageNum; i++) {
            arr.push(i)
          }
          return arr
        }
        if (index < 5) return [1, 2, 3, 4, 5, 6, 7, '+', pageNum]
        if (index >= pageNum - 1) {
          return [
            1,
            2,
            '-',
            pageNum - 5,
            pageNum - 4,
            pageNum - 3,
            pageNum - 2,
            pageNum - 1,
            pageNum
          ]
        }
        if (index === pageNum - 2) {
          return [
            1,
            2,
            '-',
            pageNum - 5,
            pageNum - 4,
            pageNum - 3,
            pageNum - 2,
            pageNum - 1,
            pageNum
          ]
        }
        return [
          1,
          '-',
          index - 2,
          index - 1,
          index,
          index + 1,
          index + 2,
          '+',
          pageNum
        ]
      }
    },
    methods: {
      initLimitNums () {
        this.limitNum = this.limit
        if (!this.limitNums.includes(this.limit)) {
          this.limitNums.push(this.limit)
          this.limitNums.sort(function (a, b) {
            return a - b
          })
        }
      },
      turn (page) {
        let i = parseInt(Number(page))
        if (i < 1) {
          i = 1
        } else if (i > this.totalPage) {
          i = this.totalPage
        }
        if (this.limitNum !== this.limit && this.limitNum !== '') {
          if (this.totalCount === 0) {
            this.$emit('update:limit', this.limitNum)
            return
          }
          let pages = Math.ceil(this.totalCount / this.limitNum)
          if (page > pages) {
            i = pages
          }
          this.$emit('update:limit', this.limitNum)
        }
        this.goPage = i
        this.$emit('update:currentPage', i)
        this.$emit('turn')
      }
    }
  }
</script>
<style lang="less">
  .pagination {
    position: relative;
    line-height: 28px;
    margin-top: 5px !important;
    user-select: none;
    text-align: right;
    .total {
      display: inline-block;
      margin-right: 10px;
    }
    .el-select.page {
      .el-input {
        .el-input__inner {
          text-transform: capitalize !important;
        }
      }
    }
    .paging {
      display: inline-block;
      li {
        display: inline-block;
        min-width: 32px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        cursor: pointer;
        &.num {
          font-weight: 700;
        }
        &.icon {
          font-weight: 400;
        }
        &.prev,
        &.next {
          .el-icon {
            font-size: 12px;
            font-weight: 700;
          }
        }
        &:not(.disabled):not(.active):hover {
          color: #409EFF;
          border-color: #409EFF ;
        }
        &.active {
          color: #409EFF;
          cursor: default;
        }
        &.disabled {
          cursor: not-allowed;
          color: #ccc;
        }
      }
    }
    .el-select {
      display: inline-block;
      width: 100px !important;
      .el-input {
        width: 100px;
        .el-input__inner {
          height: 28px;
          line-height: 28px;
          padding-left: 10px;
          padding-right: 25px;
          border-radius: 3px;
          text-align: center;
        }
        .el-input__suffix {
          right: 1px;
        }
        .el-input__icon {
          height: 26px;
          line-height: 26px;
        }
      }
    }

    .jump {
      display: inline-block;
      .el-input {
        width: 50px;
        line-height: 18px;
        padding: 0 2px;
        height: 28px;
        text-align: center;
        margin: 0 2px;
        box-sizing: border-box;
        border-radius: 3px;
        display: inline-block;
        input {
          height: 28px;
          line-height: 28px;
          padding: 0 4px;
          text-align: center;
        }
      }
    }
  }
</style>
